<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item">
            <div class="item-left" @touchstart.stop @click="handleHistory">
                <!--<div class="icon-back"><img src="../../../assets/project/icon_back.png" alt=""></div>-->
                <div class="item-left-title">客服</div>
            </div>
            <!--<div class="item-right"><img src="../../../assets/project/logo.png" alt=""></div>-->
        </div>
        <div class="ui-mode-content flex1" id="container" ref="scroll">
            <template>
                <!--  聊天内容  -->
                <div class="chat-content">
                    <div class="chat-time">{{nowDate}}</div>
                    <div class="chat-user">社趣邻居为您服务</div>
                    <div class="chat-box">
                        <div class="chat-item mt-flex" v-if="item.tag_mid_table" :class="{'mt-flex-row-reverse': item.mid_table_remark_011 === public_user_info.id_public_user_info.toString()}" v-for="(item, index) of chatContent" :key="index">
                            <div class="user-image" v-if="item.mid_table_remark_011 === public_user_info.id_public_user_info.toString()"><img :src="public_user_info.weichat_img" alt=""></div>
                            <!--<div class="user-image current" v-else><img src="../../../assets/project/chat_user_img.png" alt=""></div>-->
                            <div class="user-send" v-if="item.mid_table_remark_011 === public_user_info.id_public_user_info.toString()">
                                <div class="send-text">{{ item.tag_mid_table }}</div>
                            </div>
                            <div class="reply-content" v-else>
                                <div class="reply-name">社趣邻居</div>
                                <div class="reply-text" :class="{'current': item.table_status_father === 103}">
                                    <span v-if="item.table_status_father === 101">{{item.tag_mid_table}}</span>
                                    <img v-else-if="item.table_status_father === 103" :src="item.tag_mid_table" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  发送区域  -->
                <div class="send-message">
                    <div class="send-inner mt-flex mt-flex-align-center mt-flex-between">
                        <div><van-field v-model="messageText" placeholder="很高兴为您服务,请扫码添加好友,私聊咨询"></van-field></div>
                        <div class="send-button"  @touchstart.stop @click="handleSendMessage">
                            <!--<img src="../../../assets/project/icon_send.png" alt="">-->
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>

    import mixinCommon from '../../../mixins/common'
    import mixinRequest from '../../../mixins/request';
    import mixinShare from '../../../mixins/share';
    /*import Moment from 'moment'*/

    export default {
        name: "Service",

        data() {
            return {
                chatGroupId: '',
                /* nowDate: Moment(new Date()).format('yyyy年MM月DD日 hh:mm'),*/
                messageText: '',
                chatContent: [],
                public_user_info: {}
            }
        },
        mixins: [
            mixinCommon,
            mixinRequest,
            mixinShare
        ],
        mounted() {
            this.init()
        },
        methods: {
            init(){
                let public_agent_info=this.$store.state.global.public_agent_info,
                    public_user_info=this.$store.state.global.public_user_info;
                if(public_agent_info&&public_user_info){
                    this.public_agent_info=public_agent_info;
                    this.public_user_info=public_user_info;
                    document.title=this.public_agent_info.application_name;
                    this.showContent();
                    this.getChatGroup()
                }else{
                    this.getPageInfo({
                        name:'common.shop.info',
                        param:{
                            invoke_method:'user_and_shop_info'
                        }
                    }).then(({result,response})=>{
                        this.public_agent_info=result.public_agent_info||{};
                        this.public_user_info=result.public_user_info||{};
                        this.public_goods_order_record=result.public_goods_order_record||{};
                        this.chat_obj = {
                            id_public_data_admin_user: result.public_user_info.id_public_data_admin_user,
                            id_public_user_info: result.public_user_info.id_public_user_info,
                            nick_name: result.public_user_info.nick_name,
                            phone_user: result.public_user_info.user_phone
                        }
                        this.middle_obj = {
                            id_public_data_admin_user: result.public_user_info.id_public_data_admin_user,
                            type_middle_app: 1111,
                            type_inner_app: 101,
                            is_online: 0,
                            id_public_user_info: result.public_user_info.id_public_user_info,
                            mid_table_remark_001: result.public_user_info.nick_name,
                            mid_table_remark_002: result.public_user_info.user_phone,
                        }
                        this.getChatGroup()
                        this.setState({
                            key:'public_agent_info',
                            value:this.public_agent_info
                        });
                        this.setState({
                            key:'public_user_info',
                            value:this.public_user_info
                        });
                    });
                }
            },

            /*
            * 查询聊天组
            * */
            getChatGroup() {
                let chatUser = ''
                if (this.public_user_info.id_public_user_info < 100) {
                    chatUser = this.public_user_info.id_public_user_info + ',' + 100
                } else {
                    chatUser = 100 + ',' + this.public_user_info.id_public_user_info
                }
                this.$http.post({
                    name: 'common.middle_list',
                    data: {
                        invoke_method: 'public_load_middle_table_list',
                        pre_db_para_middle_table_name: 'public_chat_content',
                        type_middle_app: 20001,
                        type_inner_app: 1001,
                        key_4_middle_table_like: chatUser,
                        is_online: 0
                    },
                    loading: {
                        enabled: false
                    }
                }).then(({result, response}) => {
                    if (result.page_content.length) {
                        this.chatGroupId = result.page_content[0].id_public_middle_table
                        this.getChatReply()
                    } else {
                        this.createChatGroup()
                    }
                })
            },

            /*
            * 创建聊天组
            * */
            createChatGroup() {
                let chatUserId = '', chatUserName = '';
                if (this.public_user_info.id_public_user_info < 100) {
                    chatUserId = this.public_user_info.id_public_user_info + ',' + 100
                    chatUserName = this.public_user_info.nick_name + ',社趣客服'
                } else {
                    chatUserId = 100 + ',' + this.public_user_info.id_public_user_info
                    chatUserName = '社趣客服,' + this.public_user_info.id_public_user_info
                }
                this.$http.post({
                    name: 'common.middle_list',
                    data: {
                        invoke_method: 'public_insert_or_update_middle_table',
                        pre_db_para_middle_table_name: 'public_chat_content',
                        type_middle_app: 20001,
                        type_inner_app: 1001,
                        key_4_middle_table: chatUserId,
                        value_4_middle_table: chatUserName,
                        is_online: 0,
                        mid_table_remark_005: this.$moment(new Date()).format('yyyy'),
                        mid_table_remark_006: this.$moment(new Date()).format('yyyyMM'),
                        mid_table_remark_007:  this.$moment(new Date()).format('yyyyMMDD'),
                        mid_table_remark_008:  new Date().getTime(),
                        mid_table_remark_011: this.public_user_info.id_public_user_info,
                        mid_table_remark_012: this.public_user_info.nick_name
                    },
                    loading: {
                        enabled: false
                    }
                }).then(({result, response}) => {
                    this.chatGroupId = result.page_content[0].id_public_middle_table
                })
            },

            /*
            * 发送消息
            * */
            handleSendMessage() {
                this.$http.post({
                    name: 'common.middle_list',
                    data: {
                        invoke_method: 'public_insert_or_update_middle_table',
                        pre_db_para_middle_table_name: 'public_chat_content',
                        type_middle_app: 10001,
                        type_inner_app: 1001,
                        table_status_father: 101,
                        table_id_father: this.chatGroupId,
                        is_online: 0,
                        mid_table_remark_005: this.$moment(new Date()).format('yyyy'),
                        mid_table_remark_006: this.$moment(new Date()).format('yyyyMM'),
                        mid_table_remark_007:  this.$moment(new Date()).format('yyyyMMDD'),
                        mid_table_remark_008:  new Date().getTime(),
                        mid_table_remark_011: this.public_user_info.id_public_user_info,
                        mid_table_remark_012: this.public_user_info.nick_name,
                        tag_mid_table: this.messageText,
                        pre_cmd_para_auto_answer: true
                    },
                    loading: {
                        enabled: false
                    }
                }).then(({result, response}) => {
                    this.messageText = ''
                    this.chatContent = result.page_content
                    setTimeout(() => {
                        this.getChatReply()
                    }, 1500)
                })
            },

            /*
            * 获取返回内容
            * */
            getChatReply() {
                this.$http.post({
                    name: 'common.middle_list',
                    data: {
                        invoke_method: 'public_load_middle_table_list',
                        pre_db_para_middle_table_name: 'public_chat_content',
                        type_middle_app: 10001,
                        type_inner_app: 1001,
                        table_id_father: this.chatGroupId,
                        is_online: 0
                    },
                    loading: {
                        enabled: false
                    }
                }).then(({result, response}) => {
                    this.chatContent = result.page_content
                    console.log(this.chatContent.length)
                    if (!this.chatContent.length) {
                        this.handleSendMessage()
                    }
                })
            },

            /*
            * 返回上一级
            * */
            handleHistory() {
                if (this.$route.query.type) {
                    this.$router.push({path: '/front_page_index?redirect=my'})
                } else {
                    this.$router.go(-1);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .ui-mode-content {
        padding-bottom: 4rem;
    }

    .chat-content {
        padding: 0.96rem 0.427rem;

        .chat-time {
            text-align: center;
            color: #767573;
            font-size: 0.587rem;
        }

        .chat-user {
            width: 5.6rem;
            height: 1.067rem;
            margin: 0.64rem auto 1.28rem;
            background-color: #fff;
            border-radius: 0.533rem;
            text-align: center;
            line-height: 1.067rem;
            font-size: 0.587rem;
            color: #767573;
        }

        .chat-box {
            .chat-item {
                .user-image {
                    width: 2.027rem;
                    height: 2.027rem;
                    border-radius: 50%;
                    margin-left: 0.427rem;
                    margin-right: 0.427rem;

                    &.current {
                        margin-top: 1.067rem;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }

                .first-send {
                    background-color: #fff;
                    padding: 0.64rem;
                    margin-bottom: 1.227rem;

                    .send-title {
                        font-size: 0.64rem;
                        color: #767573;

                        .title-logo {
                            width: 1.333rem;
                            height: 1.333rem;
                            background-color: #f7f7f7;
                            border-radius: 50%;
                            margin-right: 0.267rem;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    .send-text {
                        font-size: 0.853rem;
                        color: #222222;
                        font-weight: 600;
                        margin: 0.853rem 0 0.533rem;
                    }

                    .send-img {
                        width: 9.12rem;
                        height: 5.013rem;
                        background-color: #f7f7f7;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .reply-content {
                    margin-bottom: 1.28rem;

                    .reply-name {
                        font-size: 0.64rem;
                        color: #767573;
                    }

                    .reply-text {
                        width: 13.387rem;
                        background-color: #fff;
                        padding: 0.64rem;
                        font-size: 0.747rem;
                        color: #000000;
                        margin-top: 0.267rem;

                        &.current {
                            width: 8.267rem;
                            height: 8.267rem;
                            padding: 0;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }

                .user-send {
                    .send-text {
                        padding: 0.64rem;
                        font-size: 0.747rem;
                        color: #222222;
                        background-color: @base-color;
                        border-radius: 0.213rem;
                    }
                }
            }
        }
    }

    .send-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4rem;
        background-color: #fff;
        padding: 0.853rem;

        .send-inner {
            width: 100%;
            height: 100%;
            background-color: #F7F7F7;
            padding: 0 0.64rem;
            box-sizing: border-box;
            font-size: 0.693rem;
            color: #767573;
            border-radius: 0.107rem;

            .send-button {
                width: 1.653rem;
                height: 1.653rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .van-field {
            width: 15rem;
            font-size: 0.693rem;
            background-color: #F7F7F7;
            padding: 0;
        }
    }

    ::v-deep {
        .van-field__control {
            font-size: 0.693rem;
        }
    }
</style>
